<template>
	<view class="card" @click="$emit('detail')">
		<view class="card-head">
			<view class="card-head-image">
				<LazyLoad :threshold="-250" height="112rpx" borderRadius="4rpx" :image="info.image" :index="info.id"
					imgMode="aspectFill" />
			</view>
			<view class="card-head-info">
				<view class="card-head-info-title">{{ info.name || '' }}</view>
				<view class="card-head-info-lesson">{{ teacher }}</view>
				<view class="card-head-info-price">
					<view class="card-head-info-price-left">{{ price }}</view>
					<view class="card-head-info-price-right">
						<view class="card-head-info-price-right-label">剩余名额</view>
						<view class="card-head-info-price-right-num">{{ person }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card-footer">
			<view class="card-footer-cell">
				<image class="card-footer-cell-icon" :src="$ICON('/index/activity/clock.png')" />
				<view class="card-footer-cell-label">
					{{ time }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import dayjs from 'dayjs'
	const emit = defineEmits(['detail'])
	const props = defineProps({
		info: {
			type: Object,
			default: () => ({})
		}
	})
	const teacher = computed(() => props.info.lecturer?.map((item: any) => {
		return item.name
	}).join('、') || "")
	const price = computed(() => Number(props.info.price) > 0 ? `￥${Number(props.info.price)}` : '免费')
	const time = computed(() => {
		const startTime = dayjs(props.info.start_time).format('YYYY/MM/DD HH:mm')
		const endTime = dayjs(props.info.end_time).format('YYYY/MM/DD HH:mm')
		return `${startTime}~${endTime}`
	})
	const person = computed(() => {
		if (!props.info.person_limit) {
			return "不限人数"
		} else {
			return `${props.info.person_num || 0}人`
		}
	})
</script>

<style lang="scss" scoped>
	.card {
		box-shadow: inset 0rpx 0rpx 32rpx 2rpx #FFFFFF;
		border-radius: 8rpx;
		border: 2rpx solid #FFFFFF;
		padding: 20rpx 16rpx 16rpx 16rpx;

		&-head {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;

			&-image {
				width: 200rpx;
				height: 112rpx;
				border-radius: 4rpx;
				display: block;
				margin-right: 24rpx;
			}

			&-info {
				width: calc(100% - 224rpx);

				&-title {
					font-weight: 400;
					font-size: 26rpx;
					color: #000000;
					line-height: 36rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					word-break: break-all;
				}

				&-lesson {
					font-weight: 400;
					font-size: 20rpx;
					color: #666666;
					line-height: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					word-break: break-all;
					margin-bottom: 12rpx;
				}

				&-price {
					display: flex;
					align-items: center;
					justify-content: space-between;

					&-left {
						font-weight: 400;
						font-size: 26rpx;
						color: var(--themeColors);
						line-height: 36rpx;
					}

					&-right {
						display: flex;
						align-items: center;
						justify-content: flex-end;

						&-label {
							font-weight: 400;
							font-size: 20rpx;
							color: #999999;
							line-height: 28rpx;
						}

						&-num {
							font-weight: 400;
							font-size: 20rpx;
							color: #000000;
							line-height: 28rpx;
							margin-left: 10rpx;
						}
					}
				}
			}
		}

		&-footer {
			&-cell {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&-icon {
					width: 34rpx;
					height: 34rpx;
					display: block;
					margin-right: 10rpx;
					flex-shrink: 0;
				}

				&-label {
					flex: 1;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					line-height: 34rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					word-break: break-all;
				}

			}
		}
	}
</style>
